import React, { useState, useEffect } from 'react';
import { MyRingStyled } from './style';

type MyRingPropsType = {
  maxPercent: number;
};

const MyRing: React.FC<MyRingPropsType> = (props) => {
  const [percent, setPercent] = useState<number>(0);
  const [maxPercent, setMaxPercent] = useState<number>(0);

  // 环形图动画
  function countDowm(count: number) {
    let curCount = 0;
    let t = setInterval(() => {
      if (curCount === count) {
        // 倒计时结束， 取消定时器
        clearInterval(t);
      } else {
        setPercent(++curCount);
      }
    }, 10);
  }

  useEffect(() => {
    setMaxPercent(props.maxPercent);
    countDowm(props.maxPercent);
  }, [props.maxPercent]);

  return (
    <MyRingStyled percent={percent}>
      <div className='shadow'></div>
    </MyRingStyled>
  );
};

export default MyRing;
